<template>
<div  ref="Produce">
         
         <!-- 背景图片 -->
      <!-- <div class="BackColor" >
         <img :src="require('@/assets/default/background/'+BackImage.src)"  v-if="BackImage.type==1">
         <img  :src="BackImage.src"  v-else/>
      </div> -->
      <div class="BackColor" ref="BackColor">

      </div>

       <!-- 介绍 -->
       <div class="flex">
           <div class="title word">MTBLOG</div>
           <div class="box">
               <div class="welcome" ref="welcome">{{welcomeDataNow}}</div>
           </div>     
       </div>
        <i class="el-icon-arrow-down" @click="move"></i>
</div>
</template>
<script>
import snow from '@/common/effect/snow'
import {mapState} from 'vuex'
  export default 
  {
     name :'', 
     data() {
       return {
          count:0,
          type:0, //0加 1减
          welcomeData:'欢迎来到MTBLOG!',
          welcomeDataNow:'',
          timer:null,
          time:300,
          snow:null,
       }
     },
     computed:{
        ...mapState('Setting',['SnowState']),
        ...mapState('Setting',['BackImage','Subject']),
     },
     methods:{
      init(){
         let data={
            width:1920,
            height:1280 ,
            count:10,
            maxSize:30,
            box:this.$refs.BackColor,
         }
         this.snow= new snow(data)
         if(this.SnowState == 1)
         this.snow.star()
       },
         move(){
            let from = document.documentElement.scrollTop || document.body.scrollTop || 0
            
            let to=parseInt(this.$refs.Produce.offsetHeight)
            this.$public.Move(from,to,500)
         },
        write(){
             this.welcomeDataNow=this.welcomeData.slice(0,this.count)
        },
        welcome(){
          this.timer=setInterval(() => {
               if(this.type==0)
               {
                  this.time=300
                  this.count+=1
               }
               else {
                  this.count-=1
                  this.time=50
               }
               if(this.count==11){
                  this.type=1
                  this.time=2000
               }
               else if(this.count==0){
                    this.type=0
                    this.time=2000
               }
           }, this.time);
        }
     },
     mounted() {
         this.welcome()
         this.init()
     },
     beforeDestroy(){
         clearInterval(this.timer)
     },
    watch:{
      count(){
          this.write()
      },
      time(){
         clearInterval(this.timer)
         this.welcome()
      },
      SnowState:{
         handler(newValue){
            if(this.snow==null)
             this.init()
            else if(newValue == 1)
             this.snow.star()
            else this.snow.end()
         }

      }

    }
  }
</script>
<style scoped lang='less'>
img{
   object-fit: cover;
   width: 100%;
}
.BackColor{
   width: 100vw;height: 100vh;
   position: absolute;
   top: 0;left: 0;
   z-index: 1;
}
.produce{
    width: 100vw;height: 100vh;
    position:relative;z-index: 5;
    background: rgba(0, 0, 0, 0.2);
}
.title{
   width: 100vw;
   text-align: center;
   color: white;
   font-size: 50px;
   font-weight: 600;
   margin-bottom: 5px;
}

@keyframes caret{
	50% { border-right-color: currentColor}
}
@keyframes jump {
   0%,100%{bottom: 20px;}
   80%{bottom: 10px;}
}
.box{
   background: rgba(0, 0, 0, 0.6);
   border-radius: 5px;
   padding: 15px;
}
.word{
   text-shadow: 5px 5px 5px var(--GeneralBackColor);
}
.welcome{
   min-width: 0px;
   height: 18px;
   color: white;
   font-size: 18px;  
   font-weight: 600;
   border-right: 1px solid transparent;
   animation: caret .5s steps(1) infinite;

}
i{
   position: absolute;
   bottom: 20px;
   color: white;
   font-weight: 600;
   font-size: 30px;
   transition-duration: 1s;
    animation: jump 1s  infinite;
    z-index: 5;
}
</style>